import * as echarts from "echarts"
import { useEffect, useRef } from "react"
// 柱状图组件

// 1. 把功能代码都放到这个组件中
// 2. 把可变的部分抽象成prop参数

const BarChart = ({ title }) => {
  const chartRef = useRef(null)

  useEffect(() => {
    // 保证DOM可用 才进行图表的渲染
    const chartDom = chartRef.current
    const myChart = echarts.init(chartDom)

    // 指定图表的配置项和数据
    const option = {
      title: {
        text: title,
      },
      xAxis: {
        type: "category",
        data: ["Vue", "React", "Angular"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          type: "bar",
          data: [10, 40, 70],
        },
      ],
    }

    // 使用刚指定的配置项和数据显示图表。
    option && myChart.setOption(option)
  }, [])

  return <div ref={chartRef} style={{ width: "500px", height: "400px" }}></div>
}

export default BarChart
